<template>
  <div class="home">
    <Header></Header>

    <!-- 板块1 -->
    <div class="banner_box swiper-container banner1" id="home_banner1">
      <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide1">
          <div class="banner_bg"></div>
          <div class="banner_info_box">
            <div class="banner_info">
              <h3>朗庭Cordis Hotel</h3>
              <p>项目落址于江宁区，为商务、会展、互联平台贸易等大都市商业活动提供完善、国际化的商旅功能。酒店共十九层，建筑面积60000㎡，客房278间 ，设施规划有容纳225人报告厅、大宴会厅、全日制餐厅、会议中心、风味餐厅、行政楼层、恒温泳池和健身房等。针对会务商旅精品酒店的偏大规模，空间规划对建筑布局做了妥善改善，确保流通区的尺度规范、确保动静前后区的严格分属。确保明快的色系与元素关联Cordis的精品定义。</p>
              <a href="#">点击了解更多</a>
            </div>
          </div>
          <!-- <div class="float_1"></div>
          <div class="float_2"></div> -->
        </div>
        <div class="swiper-slide swiper-slide2">
          <div class="banner_bg"></div>
          <div class="banner_info_box">
            <div class="banner_info">
                <h3>九华山涵月楼度假别墅</h3>
                <p>九华山涵月楼度假公寓项目坐落在安徽池州市柯村内，背倚中华四大佛教名山之-九华山。涵月楼度假酒店是九华山地区唯一的超五星奢华度假酒店。酒店占地311亩，徽派庭院式建筑风格，一步一风景，移步即洞天。顺应得天独厚的佛学底蕴、拥览依山面水的自然屏帐，酒店自规划、建筑、园林皆有 “万物静观皆自得”的悠然山水雅趣意境。度假公寓联墅环境延续涵月楼酒店“九重烟云”的旖旎风光，应业主的委托，在徽派建筑中以欧亚交融的文化要素构建典雅的西式生活情境。</p>
                <a href="#">点击了解更多</a>
            </div>
          </div>
          <!-- <div class="float_1"></div> -->
          <!-- <div class="float_2"></div> -->
        </div>
        <div class="swiper-slide swiper-slide3">
          <div class="banner_bg"></div>
          <div class="banner_info_box">
            <div class="banner_info">
                <h3>环球金融中心办公总部</h3>
                <p>为集团企业构建的总部展示空坐落于省会城市中央商务区的超高层国际金融中心，临江矗立。设计原则第一遵从企业的信仰文化----“信仰是一种敬畏、一种智慧、一种境界，也是一种志向  ” 。企业创始人归侨的身份，形成企业从教育产业起步发展至位列世界500强的多产业控股集团。</p>
                <a href="#">点击了解更多</a>
            </div>
          </div>
          <!-- <div class="float_1"></div>
          <div class="float_2"></div> -->
        </div>
      </div>
      <div class="swiper-button-prev swiper-button-white"></div>
      <div class="swiper-button-next swiper-button-white"></div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- 板块2 -->
    <div class="banner_box swiper-container banner2" id="home_banner2">
      <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide1">
          <div class="banner_info_box">
            <div class="banner_info">
              <span class="banner_tag" @click="goeed"></span>
              <b>深圳马蹄山村</b>
              <h3>城市更新创新模式研究</h3>
              <p>•用者环境体验的主题场景研究<br>•创新运营的系统服务研究</p>
              <ul class="banner2_list">
                <li>
                  <img src="~/static/img/home/banner2_list1_1.jpg" alt="">
                  <div class="banner2_list_text">
                    <span>项目顶层理念</span>
                    <span class="block">城市发展目标</span>
                  </div>
                </li>
                <li>
                  <img src="~/static/img/home/banner2_list1_2.jpg" alt="">
                  <div class="banner2_list_text">
                    <span>创意环境营造</span>
                    <span class="block">其他社区环境界面</span>
                  </div>
                </li>
                <li>
                  <img src="~/static/img/home/banner2_list1_3.jpg" alt="">
                  <div class="banner2_list_text">
                    <span>创新社区文化</span>
                    <span class="block">活动事件策划</span>
                  </div>
                </li>
              </ul>
              <a href="/eed#mati">点击了解更多</a>
            </div>
          </div>
        </div>
        <div class="swiper-slide swiper-slide2">
          <div class="banner_info_box">
            <div class="banner_info">
              <span class="banner_tag" @click="goeed"></span>
              <b class="pt1">深圳龙岗公共艺术馆</b>
              <h3>“龙岗区”三馆一城项目</h3>
              <br><br><br><br><br><br>
              <a href="/eed#longgang">点击了解更多</a>
            </div>
          </div>
        </div>
        <div class="swiper-slide swiper-slide3">
          <div class="banner_info_box">
            <div class="banner_info">
              <span class="banner_tag" @click="goeed"></span>

              <div class="banner_info_left">
                <h3>绿地探索中心</h3><br><br>
                <a href="/eed#lvdi">点击了解更多</a>
              </div>
              
            </div>
          </div>
        </div>
        <div class="swiper-slide swiper-slide4">
          <div class="banner_info_box">
            <div class="banner_info">
              <span class="banner_tag" @click="goeed"></span>
              <b class="pt1">嘉定</b>
              <h3>汽车城文体设施策划运营方案</h3>
              <br><br><br><br><br><br>
              <a href="/eed#jiading">点击了解更多</a>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-button-prev swiper-button-white"></div>
      <div class="swiper-button-next swiper-button-white"></div>
      <div class="swiper-pagination"></div>
    </div>


    <!-- 板块3  关于我们 -->
    <div class="aboutus">
      <div class="about_logo"></div>
      <h3><span>关于我们</span></h3>
      <p>"JHA DESIGN专注建筑改造及室内空间设计项目及关联产品。<br>
 服务于卓越企业、国际国内酒店管理集团、私人客户，<br>
产品包含：商旅度假酒店、总部办公、商业展示、度假别墅；<br>
提供改造优化、空间设计、设备专业协调、软装配置、现场督导的全程服务。<br>
并开展“集跃创造” “尤物定制”的研发建造与市场运营。"</p>
      <div class="aboutus_icon">
        <span><img src="~/static/img/icon/about1.png" alt=""></span>
        <span><img src="~/static/img/icon/about2.png" alt=""></span>
        <span><img src="~/static/img/icon/about3.png" alt=""></span>
        <span><img src="~/static/img/icon/about4.png" alt=""></span>
        <span><img src="~/static/img/icon/about5.png" alt=""></span>
        <span><img src="~/static/img/icon/about6.png" alt=""></span>
      </div>
    </div>

    <!-- 板块4  设计团队 -->
    <div class="team">
      <h3><span>设计团队</span></h3>
      <div class="home_team swiper-container" id="home_team">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <ul class="team_list">
              <li @click="showDetail(index)" v-for="(item,index) in listData" :key="index" v-if="index<4">
                <div><img :src="'http://pic.jha-design.com/team/'+item.pinyin+'.jpg'" alt=""></div>
                <b>{{item.name}}</b>
                <p>{{item.zhiwei}}</p>
              </li>
            </ul>
          </div>
          <div class="swiper-slide" v-if="index>=4&&index<8">
            <ul class="team_list">
              <li @click="showDetail(index)" v-for="(item,index) in listData" :key="index" v-if="index>=4&&index<8">
                <div><img :src="'http://pic.jha-design.com/team/'+item.pinyin+'.jpg'" alt=""></div>
                <b>{{item.name}}</b>
                <p>{{item.zhiwei}}</p>
              </li>
            </ul>
          </div>
        </div>
        <!-- <div class="swiper-button-prev swiper-button-black"></div>
        <div class="swiper-button-next swiper-button-black"></div> -->
      </div>
    </div>
    
    <!-- 板块5  底部 -->
    <Footer></Footer>
    
  </div>
</template>

<script>
import Header from '~/components/common/header.vue';
import Footer from '~/components/common/footer.vue';

import listData from '~/assets/js/data/cheng.js';

export default {
  head(){
    return{
      title: '首页',
      meta: [{
          hid: "keywords",
          name: "keywords",
          content: ''
        },
        {
          hid: "description",
          name: "description",
          content: ''
        }
      ]
    }
  },
  components: {
    Header,
    Footer
  },
  data(){
    return {
      listData: listData
    }
  },
  methods:{
    showDetail(index){
      location.href = '/cheng?index='+index;
    },
    goeed(){
      location.href = '/eed';
    }
  },
  mounted() {
    

    //首页banner
    var mySwiper1 = new Swiper('#home_banner1', {
        autoplay: 5000,//可选选项，自动滑动
        pagination : '.swiper-pagination',
        loop : true,
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next'
    });

    var mySwiper2 = new Swiper('#home_banner2', {
        autoplay: 5000,//可选选项，自动滑动
        pagination : '.swiper-pagination',
        loop : true,
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',
        onInit: function(swiper){
          setTimeout(function(){
            var H = parseInt($('.banner2 .swiper-slide').eq(1).height());
          $('.banner2 .swiper-slide').height(H);
          },100);
        }
    });


    var mySwiper3 = new Swiper('#home_team', {
        //autoplay: 5000,//可选选项，自动滑动
        loop : false,
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next'
    });

    
    
  }
}
</script>




<style lang="scss" scoped>

/* banner */
.banner_box{
  .swiper-slide{
    padding: 1rem 0;
  }
  

  .banner_bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: -webkit-linear-gradient(left,rgba(0,0,0,0.8),rgba(0,0,0,0.6),rgba(0,0,0,0.4),rgba(0,0,0,0.1)); /* Safari 5.1 - 6 */
    background: -o-linear-gradient(right,rgba(0,0,0,0.8),rgba(0,0,0,0.6),rgba(0,0,0,0.4),rgba(0,0,0,0.1)); /* Opera 11.1 - 12*/
    background: -moz-linear-gradient(right,rgba(0,0,0,0.8),rgba(0,0,0,0.6),rgba(0,0,0,0.4),rgba(0,0,0,0.1)); /* Firefox 3.6 - 15*/
    background: linear-gradient(to right, rgba(0,0,0,0.8),rgba(0,0,0,0.6),rgba(0,0,0,0.4), rgba(0,0,0,0.1)); /* 标准的语法 */
  }
  .banner_info_box{ 
     width: 100%; max-width: 1200px; height: 100%; color: #ccc;
     margin: 0 auto;
     position: relative;
     z-index: 2;
    .banner_info{ 
      width: 4.8rem; position: relative; box-sizing: border-box; margin-left: 0.5rem;
  
      // .banner_tag{
      //   display: inline-block;
      //   background: url('~/static/img/home/eed_logo.png') no-repeat center center;
      //   width: 1.08rem;
      //   height: 0.93rem;
      //   background-size: cover;
      //   position: absolute;
      //   left: 0;
      //   top: -0.4rem;
      // }
      .banner_tag{
        display: inline-block;
        width: 1.2rem;
        height: 1.2rem;
        background: url('~/static/img/eed/eed_log.png') no-repeat center center;
        background-size: cover;
        position: absolute;
        left: 2%;
        top: -0.4rem;
      }
      .pt1{
        padding-top: 1rem;
      }
      b{ font-size: 0.36rem; font-weight: normal; display: block;}
      h3{ color: #fff; font-size: 0.44rem; font-weight: normal;
        border-bottom:#fff solid 1px;
        padding-bottom: 0.12rem;
      }
      p{ font-size: 0.14rem; line-height: 0.26rem; margin-top: 0.2rem; color: #c9c9c9;}
      a{ display: inline-block; font-size:0.19rem; height: 0.44rem; line-height: 0.44rem; padding: 0 0.3rem; display: inline-block; background-color: #a7161d; color: #fff; margin-top: 0.32rem;}
    }
  }
  .swiper-slide{
    .float_1,.float_2{
      position: absolute;
      left: 50%;
      top: 50%;
      display: block;
      width: 3.4rem;
      height: 1.6rem;
      box-shadow: 0 0 30px rgba(0,0,0,0.7);
      
      transform: translate(-60%,-110%) perspective(100px) rotateY(4deg);
      -webkit-transition:all 0.5s ease-out 0.2s;
      transition:all 0.5s ease-out 0.2s;
      opacity: 0;
      z-index: 3;
    }
    .float_2{
      
      transform: translate(100%,30%) perspective(100px) rotateY(-4deg);
    }
    img{
      display: block;
      max-height: 650px;
    }
  }
}

.banner1{
  .banner_info_box{
    -webkit-transition:all 0.4s ease-out 0.2s;
    transition:all 0.4s ease-out 0.2s;
    opacity: 0;
    transform: translateX(15%);
  }
  .swiper-slide{
    height: 6rem;
  }
  .swiper-slide1{
    background: url('~/static/img/home/banner1_1.jpg') no-repeat center center;
    // .float_1{ background: url('http://pic.jha-design.com/hui/nanjing_langting/2.jpg') no-repeat center center; background-size: cover;}
    // .float_2{ background: url('http://pic.jha-design.com/hui/nanjing_langting/5.jpg') no-repeat center center; background-size: cover;}
  }
  .swiper-slide2{
    background: url('http://pic.jha-design.com/hui/anhui_hanyuelou/1.jpg') no-repeat center center;
    // .float_1{ background: url('http://pic.jha-design.com/hui/anhui_hanyuelou/4.jpg') no-repeat center center; background-size: cover;}
    // .float_2{ background: url('http://pic.jha-design.com/hui/anhui_hanyuelou/5.jpg') no-repeat center center; background-size: cover;}
  }
  .swiper-slide3{
    background: url('http://pic.jha-design.com/hui/fuzhou_huanqiujinrong/8.jpg') no-repeat center center;
    // .float_1{ background: url('http://pic.jha-design.com/hui/fuzhou_huanqiujinrong/11.jpg') no-repeat center center; background-size: cover;}
    // .float_2{ background: url('http://pic.jha-design.com/hui/fuzhou_huanqiujinrong/23.jpg') no-repeat center center; background-size: cover;}
  }
  .swiper-slide-active{
    .float_1{
      transform: translate(0,-110%) perspective(100px) rotateY(4deg);
      opacity: 1;
    }
    .float_2{
      transform: translate(40%,30%) perspective(100px) rotateY(-4deg);
      opacity: 1;
    }
    .banner_info_box{
      opacity: 1;
      transform: translateX(0);
    }
    
  }
}

.banner2{
  
  
  
  .banner_info_box{
    .banner_info{
      height: 100%;
      position: relative;
      top: 0;
      transform: translateY(0);
      text-align: center;
      margin-left: 0;
      b{
        color: #ccc;
        font-size: 0.23rem;
        margin-bottom: 0.05rem;
      }
      .mt1{
        margin-top: 1rem;
      }
      h3{
        display: inline-block;
        border: #fff solid 2px;
        font-size: 0.38rem;
        padding: 0 0.15rem;
        line-height: 0.5rem;
        height: 0.5rem;
        overflow: hidden;
      }
      p{
        margin: 0;
        color: #c9c9c9;
        font-size: 0.14rem;
      }
      .banner2_list{
        width: 80%;
        margin: 0.4rem auto 0;
        overflow: hidden;
        li{
          float: left;
          width: 33%;
          text-align: center;
          img{
            border-radius: 50%;
            width: 60%;
            display: inline-block;
          }
          .banner2_list_text{
            overflow: hidden;
            margin-top: 0.1rem;
            span{
              display: inline-block;
              vertical-align: top;
              border-bottom: solid 1px #a7161d;
              position: relative;
              color: #fff;
              font-size: 0.19rem;
              line-height: 0.32rem;
            }
            .block{
              display: block;
              border: none;
            }
          }
        }
      }
      a{
        margin-top: 0.4rem;
      }
      
    }
  }

  .swiper-slide{
    padding: 1rem 0;
  }
  .swiper-slide1{
    background: url('~/static/img/home/banner2_list1_bg.jpg') no-repeat center center;
    background-size: cover;
  }
  .swiper-slide2{
    background: url('~/static/img/home/banner2_list2_bg.jpg') no-repeat center center;
    background-size: cover;
    height: 100%;
  }
  .swiper-slide3{
    background: url('~/static/img/home/banner2_list3_bg.jpg') no-repeat center center;
    background-size: cover;
    height: 100%;
    .banner_info{
      .banner_info_left{
        position: absolute; left: 33%; top: 45%; margin-left: -2rem; text-align: left;
        h3{
          
        }
        a{
          
        }
      }
      
    }
  }
  .swiper-slide4{
    background: url('~/static/img/home/banner2_list4_bg.jpg') no-repeat center center;
    background-size: cover;
    height: 100%;
  }
}

.aboutus{
  padding: 0.5rem 0 1rem;
  background: url('~/static/img/home/aboutus_bg.jpg') no-repeat center center;
  background-size: cover;
  .about_logo{
    width: 0.8rem;
    height: 0.98rem;
    margin: 0 auto;
    background: url('~/static/img/logo2.png') no-repeat center center;
    background-size: cover;
  }
  h3{
    font-size: 0.38rem;
    padding-top: 0.4rem;
    text-align: center;
    span{
      display: inline-block;
      border-bottom: #a7161d solid 2px;
    }
  }
  p{
    margin-top: 0.35rem;
    font-size: 0.14rem;
    line-height: 0.32rem;
    color: #5c5c5c;
    text-align: center;
  }
  .aboutus_icon{
    text-align: center;
    margin-top: 0.55rem;
    span{
      border-radius: 50%;
      display: inline-block;
      margin: 0 0.05rem;
      padding: 0.1rem;
      transition: all 0.2s ease-out 0s;
      -webkit-transition: all 0.2s ease-out 0s;
    }
    
    img{
      max-width: 100%;
    }
  }
}

.team{
  padding-bottom: 1rem;
  h3{
    font-size: 0.38rem;
    padding-top: 0.4rem;
    text-align: center;
    span{
      display: inline-block;
      border-bottom: #a7161d solid 2px;
    }
  }
  .team_list{
    overflow: hidden;
    max-width: 1200px;
    margin: 0.6rem auto 0;
    li{
      float: left;
      width: 19%;
      margin: 0 3%;
      text-align: center;
      cursor: pointer;
      
      b{
        display: block;
        margin-top: 0.3rem;
        font-size: 0.3rem;
      }
      p{
        color: #666;
        font-size: 0.16rem;
      }
      div{
        width: 100%;
        overflow: hidden;
        border-radius: 50%;
        img{
          width: 100%;
          -webkit-transition:all 0.3s linear 0s;
          transition:all 0.3s linear 0s;
        }
      }
      
      &:hover{
        img{
          transform: scale(1.1);
        -webkit-transform: scale(1.1);
        }
        
      }
    }
  }
}

.footer_all{
  background: url('~/static/img/footer_bg.jpg') no-repeat center center;
  background-size: cover;
  .footer{
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 0.2rem;
    
    position: relative;
    h3{
      font-size: 0.38rem;
      padding-top: 0.4rem;
      text-align: center;
      span{
        display: inline-block;
        border-bottom: #a7161d solid 2px;
        color: #fff;
      }
    }
    .footer_nav{
      a{
        color: #fff;
        font-size: 0.16rem;
        margin-right: 0.36rem;
      }
    }
    .go_top{
      font-size: 0.16rem;
      color: #fff;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      span{
        float: right;
        margin-top: -0.3rem;
        cursor: pointer;
      }
    }
    .footer_info{
      color: #fff;
      font-size: 0.12rem;
      margin-top: 0.4rem;
    }
  }
}

// .banner_bg_black{
//   background-color: #000;
//   .banner_info_box{ 
//     background: none;
//     .banner_info{ 
//       top: 0.45rem; transform: translateY(0);
//       .banner_tag{
//         display: inline-block;
//         background: url('~/static/img/home/eed_logo.png') no-repeat center center;
//         width: 1.08rem;
//         height: 0.93rem;
//         background-size: cover;
//         position: absolute;
//         left: 0;
//         top: 0.4rem;
//       }
//       h3{ 
//         font-size: 0.38rem;
//       }
//       h4{ font-size: 0.26rem; color: #fff; margin-top: 0.1rem;}
//       p{ margin-top: 0.3rem;}
//     }
//   }
//   img{ opacity: 0.6;}
// }


#home_banner2{
  .banner_info_box{
    width: 100%;
    .banner_info{
      width: 100%;
    }
  }
}

@media only screen and (max-width: 900px) {
  .banner_box{

    .swiper-slide{
      .float_1,.float_2{
        display: none;
      }
    }

    .banner_info_box{ 
      
      width: 100%;
      .banner_info{
        padding: 0 8%;
        margin-left: 0;
        width: 100%;
        left: 0;
        b{ font-size: 0.22rem;}
        h3{ font-size: 0.3rem;}
        p{ font-size: 0.18rem;}
      }
    }
    img{ width: 130%;}
    
  }
  
  .banner_bg_black{
    .banner_info_box{ 
      .banner_info{ 
        top: 0.2rem;
        b{ font-size: 0.2rem; margin-top:0.2rem ;}
        h3{ font-size: 0.28rem;}
        h4{font-size: 0.2rem; margin-top: 0.05rem;}
        p{ font-size: 0.16rem; margin-top: 0.2rem;}
      } 
    }
    
  }

  .aboutus{
    .aboutus_icon{
      span{
        width: 0.8rem;
      }
    }
  }
}

</style>
<style lang="scss">
.home{
  .swiper-container{
    .swiper-slide{ max-width: 100vw; overflow: hidden; background-size: cover;}
    .swiper-pagination-bullet{ width: 0.44rem; height: 2px; border-radius:3rem; background-color: #fff; opacity: 1;}
    .swiper-pagination-bullet-active{ background-color: #a7161d;}
    .swiper-button-next, .swiper-button-prev{}
    .swiper-button-disabled{ display: none;}
  }
}


  
</style>